<template>
    <a-modal :title="title" v-model:visible="open" @before-ok="submitForm" align-center draggable :width="800">
        <a-form ref="userRef" :model="form" :rules="rules" @submit="submitForm" auto-label-width>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item field="nickName" label="用户昵称">
                        <a-input v-model="form.nickName" placeholder="请输入用户昵称"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="deptId" label="归属部门">
                        <a-tree-select v-model="form.deptId" :style="{ width: '100%' }" :data="deptOptions"
                            :field-names="{ title: 'label', key: 'id', children: 'children' }" placeholder="请选择归属部门" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="phonenumber" label="手机号码">
                        <a-input v-model="form.phonenumber" placeholder="请输入手机号码"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="email" label="邮箱">
                        <a-input v-model="form.email" placeholder="请输入邮箱"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="userName" label="用户名称">
                        <a-input v-model="form.userName" placeholder="请输入用户名称"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="password" label="用户密码">
                        <a-input v-model="form.password" placeholder="请输入用户密码" type="password"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="sex" label="用户性别">
                        <a-select v-model="form.sex" placeholder="请选择用户性别">
                            <a-option v-for="item in sys_user_sex" :value="item.value" :label="item.label"></a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="status" label="状态">
                        <a-radio-group v-model="form.status">
                            <a-radio v-for="item in sys_normal_disable" :value="item.value">{{ item.label }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="postIds" label="岗位">
                        <a-select v-model="form.postIds" mode="multiple" placeholder="请选择用户岗位">
                            <a-option v-for="item in postOptions" :value="item.postId"
                                :label="item.postName"></a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="roleIds" label="角色">
                        <a-select v-model="form.roleIds" mode="multiple" placeholder="请选择用户角色">
                            <a-option v-for="item in roleOptions" :value="item.roleId"
                                :label="item.roleName"></a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item field="remark" label="备注">
                        <a-textarea v-model="form.remark" placeholder="备注..." :max-length="128" allow-clear
                            show-word-limit />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script setup name="User">
import { addUser, deptTreeSelect, getUser, updateUser } from "@/api/system/user";
import { getCurrentInstance, reactive, ref, toRefs } from "vue";

const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

const open = ref(false);
const title = ref("");
const deptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);

const init = (method, userId) => {
    open.value = true;
    reset()
    if (method === 'add') {
        title.value = "添加用户";
        form.value.password = initPassword.value;
        getUser().then(({ data }) => {
            postOptions.value = data.posts;
            roleOptions.value = data.roles;
        });
    } else if (method === 'edit') {
        title.value = "修改用户";
        getUser(userId).then(({ data }) => {
            form.value = data.user;
            postOptions.value = data.posts;
            roleOptions.value = data.roles;
            form.value.postIds = data.postIds;
            form.value.roleIds = data.roleIds;
            form.password = "";
        });
    }
}

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
    },
    rules: {
        userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" },
        { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
        nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
        email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
        phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
    }
});

const { form, rules } = toRefs(data);

/** 查询部门下拉树结构 */
function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data;
    });
};

/** 重置操作表单 */
function reset() {
    form.value = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
    };
    proxy.resetForm("userRef");
};

/** 提交按钮 */
function submitForm() {
    proxy.$refs["userRef"].validate((error) => {
        if (!error) {
            if (form.value.userId != undefined) {
                updateUser(form.value).then(response => {
                    proxy.$message.success("修改成功");
                    return true
                });
            } else {
                addUser(form.value).then(response => {
                    proxy.$modal.success("新增成功");
                    return false
                });
            }
        } else {
            return false
        }
    })
};

defineExpose({
    init
});
getDeptTree()
</script>